<template>
	<view class="cardListBox">
		<view class="cardsList">
			<view class="cardsItem"
				:style="{ 'backgroundImage': 'url('+ `${cardsItem.type == 1? card1_icon : card2_icon}` + ')' }">
				<view class="top">
					<view class="left">
						<view style="width: 300rpx;height: 42rpx;font-size: 34rpx;color: #4b2312;">
							{{cardsItem.type == 1? "电量卡": cardsItem.type == 2? "折扣卡": cardsItem.type == 3? "金额卡": "次数卡"}}
						</view>
						<view>{{cardsItem.cardUseLimit}} |
							{{ cardsItem.applyStationType == 1?'所有站点':cardsItem.applyStationType==2?'指定站点':'指定条件' }}
						</view>
					</view>
					<view v-if="cardsItem.type!=2" class="right">
						<view>{{ cardsItem.availableDegrees }}</view>
						<view>/{{ cardsItem.amount }}{{ cardsItem.type == 1?'度':cardsItem.type == 4?'次':'' }}</view>
					</view>
					<view v-if="cardsItem.type==2" class="right">
						<view>{{ cardsItem.amount}}</view>
						<view>折</view>
					</view>
				</view>
				<view>
					有效期：
					<text>{{ cardsItem.fixedStartTime }}</text>至<text>{{ cardsItem.fixedEndTime }}</text>
				</view>
			</view>
		</view>
		<view class="details">
			<view>
				<view>
					<image :src="iconKaquanlaiyuan_icon"/>
					<view>来源</view>
				</view>
				<!-- <view>{{sourceList[cardsItem.activityType-1]}}/{{cardsItem.source}}</view> -->
				<!-- <view>{{ cardsItem.receiveMode ==1?"活动":cardsItem.receiveMode == 2?"成长等级会员":cardsItem.receiveMode == 3 ? "付费会员": "推广" }}</view> -->
				<view>
					{{ sourceOptions.find((item) => item.value == cardsItem.activityType).label || '-' }}
					/
					{{ cardsItem.source }}
				</view>
			</view>
			<view>
				<view>
					<image :src="iconKaquanlaiyuan_icon"/>
					<view>卡编号</view>
				</view>
				<view>{{ cardsItem.number || '-' }}</view>
			</view>
			<view>
				<view>
					<image :src="iconShijian_icon"/>
					<view>领取时间</view>
				</view>
				<view>{{ cardsItem.receiveTime || '-' }}</view>
			</view>
			<view>
				<view>
					<image :src="iconZhandian_icon"/>
					<view>使用门槛</view>
				</view>
				<view>{{ cardsItem.cardSillToStr || '-' }}</view>
			</view>
			<view>
				<view>
					<image :src="iconZhandian_icon"/>
					<view>使用限制</view>
				</view>
				<view>{{ cardsItem.restrictStr || '-' }}</view>
			</view>
			<view>
				<view>
					<image :src="iconZhandian_icon"/>
					<view>可用时段</view>
				</view>
				<view>{{ cardsItem.limitWeekDateStr || '-' }}</view>
			</view>
			<view>
				<view>
					<image :src="iconZhandian_icon"/>
					<view>适用站点</view>
				</view>
				<view v-if="cardsItem.applyStationType == 1">
					所有站点
				</view>
				<view v-if="cardsItem.applyStationType == 2">
					<view>
						{{ cardsItem.useStationAddress }}
					</view>
				</view>
			</view>
			<view>
				<view>
					<image :src="iconZhandian_icon"/>
					<view>使用说明</view>
				</view>
				<view>
					{{cardsItem.remark}}
				</view>
			</view>
		</view>
		<view/>
		<view/>
		<view/>
		<view/>
		<view/>
		<view/>
	</view>
</template>

<script>
	import {
		getMyCouponPage
	} from "@/api/https";
	import {
		cardDetails
	} from "@/api/marketing/coupon";
	const app = getApp();
	export default {
		data() {
			return {
				sourceOptions: [
					{
						label: '充值奖励活动',
						value: 1
					},
					{
						label: '累计活动',
						value: 2
					},
					{
						label: '单笔消费',
						value: 3
					},
					{
						label: '站点优惠活动',
						value: 4
					},
					{
						label: '邀请奖励',
						value: 5
					},
					{
						label: '新客有礼',
						value: 6
					},
					{
						label: '多人拼团',
						value: 7
					},
					{
						label: '卡劵赠送活动',
						value: 8
					},
					{
						label: '券码兑换活动',
						value: 9
					},
					{
						label: '首充有礼活动',
						value: 10
					},
					{
						label: '拼团',
						value: 11
					},
					{
						label: '成长会员',
						value: 12
					},
					{
						label: '付费会员',
						value: 13
					},
					{
						label: '--',
						value: 14
					},
					{
						label: '邀新升级',
						value: 15
					},
					{
						label: '拉新消费',
						value: 16
					},
					{
						label: '首月消费',
						value: 17
					},
					{
						label: '积分商场',
						value: 21
					},
				],

				sourceList: ['充值奖励活动', '累计消费活动', '单笔折扣活动', '站点优惠活动', '邀请奖励', '新客有礼', '多人拼团', '卡券赠送活动', '券码兑换活动', '首充有礼活动',
					'单笔消费活动'
				],
				defaultColor: uni.getStorageSync('defaultColor_Green'),
				card1_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/card1_icon.png`,
				card2_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/card2_icon.png`,
				iconKaquanlaiyuan_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/iconKaquanlaiyuan.png`,
				iconShijian_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/iconShijian.png`,
				iconZhandian_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/iconZhandian.png`,
				cardsItem: {},
				cardUseLimitMap: {
					1: '每天',
					2: '每周',
					3: '每月',
					4: '不限',
					5: '有限'
				}
			};
		},
		onLoad(options) {
			console.log(options)
			if (options) {
				this.getCardDetails(options.id);
			}
		},
		methods: {
			setTabName(row) {
				console.log(row)
				this.tabIndex = row.tabCode;
			},
			getCardDetails(id) {
				cardDetails(id).then((res) => {
					if (res.code == 200) {
						res.data.cardUseLimit = this.cardUseLimitMap[res.data.cardRestrict]
						this.cardsItem = res.data || {};
						console.log(res.data.marketCardOptionStations, 'res.data.marketCardOptionStations')
						if (res.data.marketCardOptionStations.length) {
							let useStationAddress = ''
							res.data.marketCardOptionStations.forEach(i => {
								useStationAddress = useStationAddress ? useStationAddress + ',' + i.stationName :
									i.stationName
							})
							console.log(useStationAddress, 'useStationAddress')
							this.cardsItem = {
								...this.cardsItem,
								useStationAddress
							}
							console.log(this.cardsItem, 'cardsItem')
						}

					}
				});
			},
		},
	};
</script>

<style lang="less" scoped>
	@import "../../../commin/commin.less";

	page {
		background-color: #f5f7fa;
		padding-bottom: 120rpx;
	}

	.cardListBox {
		width: 100%;
		min-height: 100vh;
		background: #f5f7fa;
		padding-top: 2rpx;
		box-sizing: border-box;
	}

	.tabNav {
		width: 100%;
		height: 90rpx;
		background: #ffffff;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;

		.tabItem {
			flex: 1;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #909399;
		}
	}

	.cardsList {
		width: 94%;
		margin: 0rpx auto;

		.cardsItem {
			width: 100%;
			margin: 20rpx auto;
			background-size: 110% 120%;
			background-repeat: no-repeat;
			background-position: center;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			padding: 40rpx;
			box-sizing: border-box;
			overflow: hidden;
			border-radius: 20rpx;

			.top {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: flex-start;
				color: #4B2312;

				.left {
					>view:nth-of-type(1) {
						font-size: 34rpx;
						font-weight: 400;
						color: #4b2312;
					}

					>view:nth-of-type(2) {
						margin-top: 20rpx;
						font-size: 22rpx;
						width: 300rpx;
						height: 42rpx;
						text-align: left;
						line-height: 42rpx;
						color: rgba(94, 50, 30, 0.8);
						border-radius: 21rpx;
					}
				}

				.right {
					width: 360rpx;
					height: 80rpx;
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					align-items: flex-end;

					>view {
						display: flex;
						flex-direction: row;
						justify-content: flex-end;
						align-items: flex-end;
					}

					>view:nth-of-type(1) {
						height: 80rpx;
						font-size: 48rpx;
						font-weight: bold;
					}

					>view:nth-of-type(2) {
						height: 80rpx;
						font-size: 32rpx;
					}
				}
			}

			>view:nth-of-type(2) {
				width: 100%;
				margin-top: 16rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #5E321E;
			}

			>view:nth-of-type(3) {
				width: 100%;
				margin-top: 16rpx;
				font-size: 22rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #5E321E;
			}
		}
	}

	.details {
		width: 94%;
		// height: 720rpx;
		margin: 20rpx auto;
		background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 31%, #F4F6F8 99%, #F4F6F8 100%);
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
		border-radius: 16rpx;
		border: 2rpx solid #FFFFFF;
		padding: 8rpx 32rpx 40rpx 32rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;

		>view {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-start;
			margin-top: 32rpx;

			>view:nth-of-type(1) {
				width: 150rpx;
				height: 30rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #606266;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;

				image {
					width: 28rpx;
					height: 28rpx;
				}

				>view {
					margin-left: 10rpx;
				}
			}

			>view:nth-of-type(2) {
				flex: 1;
				margin-left: 20rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #303133;
			}

		}

		>view:nth-of-type(4) {
			>view:nth-of-type(2) {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #303133;
				word-break: break-all;
				// text-overflow: ellipsis;
				// display: -webkit-box;
				// -webkit-box-orient: vertical;
				// -webkit-line-clamp: 2;
				// overflow: hidden;
			}
		}
	}
</style>